<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>着色器渲染</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            border: 3px solid blue;
            display: block;
        }
    </style>


</head>
<body>
    <canvas id="render" width="800" height="600"></canvas>
    <script type="text/javascript" src="../libs/shader.js"></script>
    <script type="text/javascript" src="../libs/webgl-utils.js"></script>
    <script id="vShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        attribute vec4 a_color;
        uniform vec2 u_resolution;
        varying vec4 v_color;
        void main()
        {
            vec2 p = a_position / u_resolution;
            vec2 k = p * 2.0 - 1.0;

            gl_Position = vec4(k * vec2(1, -1), 0, 1);
            v_color = a_color;
        }
    </script>

    <script id="fShader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif
        varying vec4 v_color;
        void main()
        {
            gl_FragColor = v_color;
        }
    </script>

    <script type="text/javascript">
        let gl = undefined;
        let program = undefined;
        let vertices = [
            100, 100,
            600, 100,
            350, 400,
        ];
        let color = randomColor();

        function main() {
            let canvas = document.getElementById('render');
            gl = canvas.getContext('webgl', {antialias:true, depth: false});
            if(!gl) {
                alert("当前浏览器不支持WebGL，请换另一个浏览器试一下！");
            }

            let vShaderText = document.getElementById('vShader').text;
            let fShaderText = document.getElementById('fShader').text;
            program = initShader(gl, vShaderText, fShaderText);

            program.pLocation = gl.getAttribLocation(program, 'a_position');
            program.cLocation = gl.getAttribLocation(program, 'a_color');
            program.reLocation = gl.getUniformLocation(program, 'u_resolution');

            program.pBuffer = gl.createBuffer();
            program.pBuffer.itemSize = 2;

            gl.bindBuffer(gl.ARRAY_BUFFER, program.pBuffer);

            program.cBuffer = gl.createBuffer();
            program.cBuffer.itemSize = 4;
            gl.bindBuffer(gl.ARRAY_BUFFER, program.cBuffer);

            drawScene(gl, program, color);
            render();
        }

        function randomColor() {
            return [
                Math.sin(Math.random()), Math.cos(Math.random()), 1.0, 1.0,
                1.0, Math.sin(Math.random()), Math.cos(Math.random()), 1.0,
                Math.sin(Math.random()),  Math.random(), Math.cos(Math.random()), 1.0,
            ]
        }

        function drawScene(gl, program, color) {
            webglUtils.resizeCanvasToDisplaySize(gl.canvas);

            gl.viewport(0.0, 0.0, gl.canvas.width, gl.canvas.height);
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            gl.useProgram(program);

            gl.enableVertexAttribArray(program.pLocation);
            gl.bindBuffer(gl.ARRAY_BUFFER, program.pBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            gl.vertexAttribPointer(program.pLocation, program.pBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.enableVertexAttribArray(program.cLocation);
            gl.bindBuffer(gl.ARRAY_BUFFER, program.cBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);
            gl.vertexAttribPointer(program.cLocation, program.cBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.uniform2f(program.reLocation, gl.canvas.width, gl.canvas.height);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / 2);
        }

        function render() {
            color = randomColor();
            drawScene(gl, program, color);
            requestAnimationFrame(render);
        }

        main();
    </script>

</body>
</html>